<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流加载</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>信息流 - 滚动加载 | <a href="/admin/index/index" color="blue">返回 - 博客列表</a></legend>
</fieldset>
<div class="site-demo-flow" id="demo2">
    {volist name="flow" id="vo"}
    <img src="{$vo.path_name}">
    {/volist}
</div>
</body>
</html>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use('flow', function() {
        var flow = layui.flow;
        var $ = layui.jquery;
        //流加载
        flow.load({
            elem: '#demo2' //流加载容器
            //,scrollElem: '#div1' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                jquery.get('/admin/index/flow?page='+page, function(res){
                    //console.log(res.pages);
                    //假设你的列表返回在data集合中
                    layui.each(res.data, function(index, item){
                        lis.push('<li>'+ '<img lay-src="'+item.file+'">' +'</li>');
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);
                    flow.lazyimg();
                });
            }
        });
    });
</script>